Using Multi Chain

Prerequisites

The tutorial assumes the user has already started with the basics of useDApp.

See the Getting Started guide if you are a new user.

Motivation

The most common approach for a DApp is to operate on a single chain. But there are some use cases when one would want to display data from multiple chains simultaneously.

useDApp has built-in multichain support.

In this tutorial we will create a simple DApp that will display simultaneously balance of an address both on Mainnet and om Kovan.

Add Kovan network to the config

As a first step we need to add the Kovan network configuration. As Kovan is a network supported by default in useDApp, the only thing we have to do is to specify an endpoint where requests can be sent to. In our case we will use Infura - free Ethereum API, that also supports the Kovan testnet. Please make the following changes to the app's entrypoint file.

  import {
    Mainnet,
+   Kovan,
    DAppProvider,
    useEtherBalance,
    useEthers,
    Config
  } from '@usedapp/core'
  import { formatEther } from '@ethersproject/units'

  import App from 'App'

  const config: Config = {
    readOnlyChainId: Mainnet.chainId,
    readOnlyUrls: {
      [Mainnet.chainId]: 'https://mainnet.infura.io/v3/62687d1a985d4508b2b7a24827551934',
+     [Kovan.chainId]: 'https://kovan.infura.io/v3/62687d1a985d4508b2b7a24827551934',
    },
  }

  ReactDOM.render(
    <React.StrictMode>
      <DAppProvider config={config}>
        <App />
      </DAppProvider>
    </React.StrictMode>,
    document.getElementById('root')
  )

Display balances on Mainnet and on Kovan

Our app will be based on one described in the Getting Started guide.

Populate the App.tsx file with the following code.

App.tsx

import React from 'react'
import { Config, DAppProvider, ZkSyncTestnet, Arbitrum, useEtherBalance, Mainnet } from '@usedapp/core'
import { formatEther } from '@ethersproject/units'
import ReactDOM from 'react-dom'
import { getDefaultProvider } from 'ethers'
import { AccountIcon } from './components/AccountIcon'

const address = '0xe13610d0a3e4303c70791773C5DF8Bb16de185d1'

const config: Config = {
  readOnlyUrls: {
    [Mainnet.chainId]: getDefaultProvider('mainnet'),
    [Arbitrum.chainId]: 'https://arb1.arbitrum.io/rpc',
    [ZkSyncTestnet.chainId]: 'https://zksync2-testnet.zksync.dev',
  },
}

ReactDOM.render(
  <DAppProvider config={config}>
    <App />
  </DAppProvider>,
  document.getElementById('root')
)

export function App() {
  const mainnetBalance = useEtherBalance(address, { chainId: Mainnet.chainId })
  const arbitrumBalance = useEtherBalance(address, { chainId: Arbitrum.chainId })
  const zkSyncBalance = useEtherBalance(address, { chainId: ZkSyncTestnet.chainId })

  return (
    <>
      <div className="balance"> Account:</div>
      <div className="inline">
        <AccountIcon account={address} />
        &nbsp;
        <div className="account">{address}</div>
      </div>
      <br />
      <div className="balance">
        Balance on Mainnet:
        <p className="bold">{mainnetBalance && formatEther(mainnetBalance)} Eth </p>
      </div>
      <div className="balance">
        Balance on Arbitrum:
        <p className="bold">{arbitrumBalance && formatEther(arbitrumBalance)} AEth</p>
      </div>
      <div className="balance">
        Balance on ZkSync Testnet:
        <p className="bold">{zkSyncBalance && formatEther(zkSyncBalance)} ZKEth</p>
      </div>
    </>
  )
}

This will take the 0x2A734Da1E0B14dC63E7dE96073329720FF50ACaC address and display the ether balance of it on both chains.

Now after running the app, you should see the balances on both chains.

Summary

In this tutorial we created a simple DApp that displays the balance of an address on two chains. This demonstrates how to display data from different chains using useDApp.